<template>
  <div class="specialty-container">
    <div class="main-info-title fs18 flex flex-row-center">
      <span>专业</span>
      <el-button type="primary" style="margin-left: auto" @click="addSpecialty">
        新建专业
      </el-button>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="1"
      @search="search"
      @reset="reset"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-column="tableColumn"
      :btn-option="btnOption"
      :table-data="tableData"
      @page-click="pageClick"
    >
      <!-- 专业标签 -->
      <template #tab="{ data }">
        <div class="flex flex-center">
          <el-tag v-for="(tag, index) in data.labelNameList" :key="index">
            {{ tag }}
          </el-tag>
        </div>
      </template>
      <!-- 专业简介 -->
      <template #professionalProfile="{ data }">
        <div class="tooltip">
          <el-tooltip class="item" effect="dark" placement="right-start">
            <div slot="content" style="max-width: 500px">
              {{ data.professionalProfile }}
            </div>
            <span>{{ data.professionalProfile | filterStr }}</span>
          </el-tooltip>
        </div>
      </template>
      <!-- 主要课程 -->
      <template #mainCourse="{ data }">
        <div class="tooltip">
          <el-tooltip
            class="item"
            effect="dark"
            placement="right-start"
            style="width: 500px"
          >
            <div slot="content" style="max-width: 500px">
              {{ data.mainCourse }}
            </div>
            <span>{{ data.mainCourse | filterStr }}</span>
          </el-tooltip>
        </div>
      </template>
      <!-- 就业方向 -->
      <template #obtainEmploymentDirection="{ data }">
        <div class="tooltip">
          <el-tooltip class="item" effect="dark" placement="right-start">
            <div slot="content" style="max-width: 500px">
              {{ data.obtainEmploymentDirection }}
            </div>
            <span>{{ data.obtainEmploymentDirection | filterStr }}</span>
          </el-tooltip>
        </div>
      </template>
    </HHtable>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogTableVisible"
      :lock-scroll="false"
    >
      <el-steps :active="stepActice" simple>
        <el-step title="专业概况" icon="el-icon-data-line"></el-step>
        <el-step title="就业情况" icon="el-icon-data-analysis"></el-step>
      </el-steps>
      <!-- 专业概况 -->
      <div v-if="stepActice === 1" class="step1 flex flex-center">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          label-position="right"
          :rules="rules"
        >
          <el-form-item label="专业名称" prop="majorName">
            <el-input
              v-model="form.majorName"
              placeholder="请输入专业名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="tags">
            <el-tag
              v-for="tag in form.labelNameList"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleTagsClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <!--
            @keyup.enter.native="handleInputConfirm"
             -->
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @blur="handleInputConfirm"
            ></el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
            >
              + 新建标签
            </el-button>
          </el-form-item>
          <el-form-item label="类别" prop="majorTypeId">
            <el-select v-model="form.majorTypeId" placeholder="请选择专业类别">
              <el-option
                v-for="item in specialtyTypeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="专业描述" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              :row="4"
              placeholder="请输入专业描述"
              maxlength="200"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="年限" prop="year">
            <el-input v-model="form.year" placeholder="请输入年限"></el-input>
          </el-form-item>
          <el-form-item label="人气值" prop="popularValue">
            <el-input
              v-model="form.popularValue"
              placeholder="请输入人气值"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="男女比例" prop="maleFemaleRatio">
            <el-input
              v-model="form.maleFemaleRatio"
              placeholder="请输入男女比例"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="专业简介" prop="professionalProfile">
            <el-input
              v-model="form.professionalProfile"
              type="textarea"
              placeholder="请输入专业描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="主要课程" prop="mainCourse">
            <el-input
              v-model="form.mainCourse"
              placeholder="请输入主要课程"
            ></el-input>
          </el-form-item>
          <el-form-item label="就业方向" prop="obtainEmploymentDirection">
            <el-input
              v-model="form.obtainEmploymentDirection"
              placeholder="请输入就业方向"
            ></el-input>
          </el-form-item>
          <el-form-item label="专题分类标签" prop="job">
            <el-select
              v-model="form.specialLabel"
              placeholder="请选择专题分类标签"
            >
              <el-option
                v-for="item in specialLabelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 就业情况 -->
      <div v-else-if="stepActice === 2" class="step2 flex flex-column">
        <div class="top">
          <div class="flex flex-row-center" style="width: 100%">
            <h4>就业行业分布：</h4>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: auto"
              @click="addEmploy"
            ></el-button>
          </div>
          <div class="content-contaienr flex flex-wrap">
            <template v-for="(item, index) in form.majorEmploymentIndustryList">
              <div :key="index" style="width: 50%; margin-bottom: 15px">
                <span>就业名称：</span>
                <el-input
                  v-model="item.industryName"
                  placeholder=""
                  style="width: 100px"
                ></el-input>
                <span style="margin-left: 15px">总人数：</span>
                <el-input
                  v-model.number="item.industryNum"
                  placeholder=""
                  style="width: 100px"
                  @blur="filterText($event)"
                ></el-input>
                <!-- 删除按钮 -->
                <!-- <el-button
                type="danger"
                icon="el-icon-minus"
                style="margin-left: 30px"
                @click="deleteTag(employArray, index)"
              ></el-button> -->
              </div>
            </template>
          </div>
        </div>
        <div class="bottom">
          <div class="flex flex-row-center" style="width: 100%">
            <h4>就业岗位分布：</h4>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: auto"
              @click="addPost"
            ></el-button>
          </div>
          <div class="content-contaienr flex flex-wrap">
            <template v-for="(item, index) in form.majorEmploymentJobsList">
              <div :key="index" style="width: 50%; margin-bottom: 15px">
                <span>岗位名称：</span>
                <el-input
                  v-model="item.jobsName"
                  placeholder=""
                  style="width: 100px"
                ></el-input>
                <span style="margin-left: 15px">总人数：</span>
                <el-input
                  v-model.number="item.jobsNum"
                  placeholder=""
                  style="width: 100px"
                  @blur="filterText($event)"
                ></el-input>
                <!-- 删除按钮 -->
                <!-- <el-button
                type="danger"
                icon="el-icon-minus"
                style="margin-left: 30px"
                @click="deleteTag(postArray, index)"
              ></el-button> -->
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="btn-container flex flex-center">
        <el-button v-if="stepActice === 2" @click="prev">上一步</el-button>
        <el-button type="primary" @click="saveSpecialtyInfo">保存</el-button>
        <el-button v-if="stepActice === 1" @click="next">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  // import WangEditor from '@/plugins/wangEditor.vue'
  import {
    specialtyList,
    getSpecialtyList,
    getMajorTypeList,
    addSpecialtyInfo,
    updateSpecialtyInfo,
    deleteSpecialtyInfo,
  } from '@/api/specialty'
  export default {
    components: {
      HHsearch,
      HHtable,
      // WangEditor,
    },
    filters: {
      filterStr(value) {
        if (!value) return '无'
        if (value.length > 20) {
          return value.substr(0, 20) + '...'
        } else {
          return value
        }
      },
    },
    data() {
      return {
        total: 0,
        dialogTitle: '新建专业信息',
        dialogTableVisible: false,
        stepActice: 1,
        inputVisible: false,
        params: {
          pageNum: 1,
          pageSize: 10,
          certificateId: '',
          labelName: '',
          majorName: '',
          typeName: '',
          year: '',
        },
        specialtyTypeList: [],
        specialLabelList: [
          {
            label: '就业前景好',
            value: '就业前景好',
          },
          {
            label: '特色专业',
            value: '特色专业',
          },
          {
            label: '优势院校专业',
            value: '优势院校专业',
          },
        ],
        inputValue: '',
        form: {
          majorName: '',
          labelNameList: [],
          majorTypeId: '',
          year: '',
          popularValue: '',
          // maleFemaleRatio: '',
          professionalProfile: '',
          mainCourse: '',
          obtainEmploymentDirection: '',
          specialLabel: '',
          // description: '',
          majorEmploymentIndustryList: [],
          majorEmploymentJobsList: [],
        },
        rules: {
          majorName: [
            { required: true, message: '请输入专业', trigger: 'blur' },
          ],
          majorTypeId: [
            { required: true, message: '请选择专业类别', trigger: 'change' },
          ],
          // tags: [
          //   { required: true, message: "请添加标签", type: "array", trigger: "change" },
          // ],
          professionalProfile: [
            { required: true, message: '请输入专业简介', trigger: 'blur' },
          ],
          // year: [{ required: true, message: "请输入年限", trigger: "blur" }],
          // popular: [{ required: true, message: "请输入人气值", trigger: "blur" }],
          // sexRate: [{ required: true, message: "请输入男女比例", trigger: "blur" }],
          mainCourse: [
            { required: true, message: '请输入主要课程', trigger: 'blur' },
          ],
          // job: [
          //   { required: true, message: '请输入就业方向', trigger: 'change' },
          // ],
        },
        tableColumn: [
          {
            prop: 'majorName',
            label: '专业名称',
          },
          {
            label: '标签',
            width: '280',
            slotContent: 'tab',
          },
          {
            prop: 'majorTypeName',
            label: '类别',
          },
          {
            prop: 'year',
            label: '年限',
          },
          {
            prop: 'professionalProfile',
            label: '专业简介',
            slotContent: 'professionalProfile',
          },
          {
            prop: 'mainCourse',
            label: '主要课程',
            slotContent: 'mainCourse',
          },
          {
            prop: 'obtainEmploymentDirection',
            label: '就业方向',
            slotContent: 'obtainEmploymentDirection',
          },
          {
            prop: 'specialLabel',
            label: '专题分类标签',
          },
        ],
        tableData: [
          {
            name: 'ydw',
            phone: '15766313400',
            tags: [
              { name: '标签一', type: 'danger' },
              { name: '标签二', type: 'success' },
              { name: '标签三', type: 'info' },
              { name: '标签四', type: 'warning' },
            ],
            score: '562',
            rank: '100',
            sex: '男',
            certificate: '中级',
            region: '广东',
            place: '广州',
            academy: '水利',
            specialty: '计算机',
            createTime: '2020-10-10 18:00:12',
          },
        ],
        searchOptions: [
          {
            type: 'text',
            prop: 'majorName',
            span: 6,
            label: '专业名称：',
            placeholder: '请输入搜索',
          },
          {
            type: 'text',
            prop: 'labelName',
            label: '标签：',
            span: 5,
            placeholder: '请输入搜索',
          },
          {
            type: 'select',
            prop: 'typeName',
            label: '类别：',
            span: 5,
            nameValue: ['typeName', 'typeName'],
            filterable: true,
            placeholder: '请输入搜索',
            arr: [],
          },
          {
            type: 'text',
            prop: 'year',
            label: '年限：',
            span: 5,
            placeholder: '请输入搜索',
          },
        ],
        btnOption: [
          {
            type: 'primary',
            size: 'mini',
            text: '修改',
            show: true,
            func: this.editor,
          },
          {
            type: 'danger',
            size: 'mini',
            text: '删除',
            show: true,
            func: this.delete,
          },
        ],
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.getSpecialtyTypeList()
        this.getSpecialtyList()
      },
      getSpecialtyList() {
        this.$refs.table.loading = true
        getSpecialtyList(this.params).then((res) => {
          if (res.code === 200) {
            this.total = res.data.total
            this.tableData = res.data.result
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          } else {
            this.$refs.table.loading = false
          }
        })
      },
      getSpecialtyTypeList() {
        getMajorTypeList().then((res) => {
          if (res.code === 200) {
            this.searchOptions[2].arr = res.data
            this.specialtyTypeList = res.data
          }
        })
      },
      addSpecialty() {
        this.stepActice = 1
        this.dialogTitle = '新建专业信息'
        this.dialogTableVisible = true
        this.form = {
          majorName: '',
          labelNameList: [],
          majorTypeId: '',
          year: '',
          popularValue: '',
          maleFemaleRatio: '',
          professionalProfile: '',
          mainCourse: '',
          obtainEmploymentDirection: '',
          specialLabel: '',
          majorEmploymentIndustryList: [],
          majorEmploymentJobsList: [],
        }
        // 清空tab状态
        this.inputValue = ''
        this.inputVisible = false
      },
      handleTagsClose(tag) {
        const tags = this.form.labelNameList
        tags.splice(tags.indexOf(tag), 1)
        this.form.labelNameList = tags
      },
      showInput() {
        this.inputVisible = true
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },
      // 处理添加tab标签
      handleInputConfirm() {
        if (this.form.labelNameList?.length >= 4) {
          this.$baseMessage('最多四个标签', 'warning')
          this.inputVisible = false
          this.inputValue = ''
          return false
        }
        let inputValue = this.inputValue
        if (inputValue && !this.form.labelNameList?.includes(inputValue)) {
          this.form.labelNameList.push(inputValue)
        } else {
          this.$baseMessage('标签名不能为空或重复标签名', 'warning')
        }
        this.inputVisible = false
        this.inputValue = ''
      },
      // 添加就业行业分布
      addEmploy() {
        if (!this.form.majorEmploymentIndustryList) {
          this.form.majorEmploymentIndustryList = []
        }
        this.form.majorEmploymentIndustryList.push({
          industryName: '',
          industryNum: '',
        })
      },
      // 添加就业岗位分布
      addPost() {
        if (!this.form.majorEmploymentJobsList) {
          this.form.majorEmploymentJobsList = []
        }
        this.form.majorEmploymentJobsList.push({
          jobsName: '',
          jobsNum: '',
        })
      },
      deleteTag(data, index) {
        data.splice(index, 1)
        this.$baseMessage('删除成功', 'success')
      },
      prev() {
        this.stepActice = 1
      },
      next() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.stepActice = 2
          } else {
            this.$baseMessage('请输入必填字段', 'warning')
          }
        })
      },
      search(res) {
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params[arr[i]] = res[arr[i]]
        }
        console.log('params', this.params)
        this.initData()
      },
      reset() {
        this.params = {
          pageNum: 1,
          pageSize: 10,
          certificateId: '',
          labelName: '',
          majorName: '',
          typeName: '',
          year: '',
        }
        this.$refs.search.removeFilterArray()
        this.initData()
      },
      pageClick(pager) {
        this.params.pageNum = pager
        this.initData()
      },
      //  修改列数据
      editor(data) {
        this.stepActice = 1
        this.dialogTitle = '修改专业信息'
        this.dialogTableVisible = true
        const arr = Object.keys(data)
        arr.forEach((item) => {
          this.form[item] = data[item]
        })
        console.log('form', this.form)
      },
      // 删除列数据
      delete(data) {
        const params = {
          ids: data.id,
        }
        deleteSpecialtyInfo(params).then((res) => {
          if (res.code === 200) {
            this.$baseMessage('删除成功', 'success')
            this.initData()
          }
        })
      },
      saveSpecialtyInfo() {
        if (this.dialogTitle === '新建专业信息') {
          addSpecialtyInfo(this.form).then((res) => {
            if (res.code === 200) {
              this.dialogTableVisible = false
              this.$baseMessage('添加成功', 'success')
              this.initData()
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
        } else {
          updateSpecialtyInfo(this.form).then((res) => {
            if (res.code === 200) {
              this.dialogTableVisible = false
              this.$baseMessage('修改成功', 'success')
              this.initData()
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
        }
        console.log('form', this.form)
      },
      filterText(e) {
        console.log('????????')
        let boolean = new RegExp('^[1-9][0-9]*$').test(e.target.value)
        if (!boolean) {
          this.$baseMessage('请输入正整数', 'warning')
          e.target.value = ' '
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/common.css';
  .specialty-container {
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      height: 32px;
      padding-top: 0;
      padding-bottom: 0;
      margin-left: 10px;
      line-height: 30px;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }

    .step1,
    .step2 {
      margin-top: 40px;
    }

    .btn-container {
      margin-top: 100px;
    }

    .main-info-title {
      position: relative;
      height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        content: '';
        background-color: #409eff;
        border-radius: 3px;
        transition: all 0.5s ease;
      }

      &:hover:after {
        width: 120px;
      }
    }
  }
</style>
